import React, {useState, useEffect} from'react';
import { Button, SearchBar, Toast, Image} from 'antd-mobile' 
import { AntOutline, RightOutline } from 'antd-mobile-icons'
import styles from '../../css/Wyx/waichu.module.css' 
import { useNavigate } from 'react-router-dom';

// 待办事项-外出登记页面
function WaiChu() {
    const navigate = useNavigate();

    const [data, setData] = useState([  
        {
            id: 1,
            title: '测量任务',
            fabudate: '08月-26日',
            celiangdate: '08月-30日',
            celiangtime: '8-10点',
            kehu: '刘伟琪',
            kehuphone: '13611111111',
            daogou: '顾晓辉',
            daogouphone: '13611111111',
            address: '广东省东莞市高盛科技园',
            yuyuedate: '2017年8月27日18:30',
            waichudate: '上午 11:30',
            price: 200
        },
        {
            id: 2,
            title: '测量任务',
            fabudate: '08月-26日',
            celiangdate: '08月-30日',
            celiangtime: '8-10点',
            kehu: '刘伟琪',
            kehuphone: '13611111111',
            daogou: '顾晓辉',
            daogouphone: '13611111111',
            address: '广东省东莞市高盛科技园',
            yuyuedate: '2017年8月27日18:30',
            waichudate: '上午 11:30',
            price: 200
        },
        {
            id: 3,
            title: '测量任务',
            fabudate: '08月-26日',
            celiangdate: '08月-30日',
            celiangtime: '8-10点',
            kehu: '刘伟琪',
            kehuphone: '13611111111',
            daogou: '顾晓辉',
            daogouphone: '13611111111',
            address: '广东省东莞市高盛科技园',
            yuyuedate: '2017年8月27日18:30',
            waichudate: '上午 11:30',
            price: 200
        }          
    ])

    return (
        <div>
            <div className="yzkphbTop">
                <div onClick={() => {
                    navigate("/yzk/wo")
                }}>
                    返回
                </div>
                <div>
                    测量记录
                </div>
                <div> </div>
            </div>
            <SearchBar placeholder="搜索" maxLength={8} />
            {/* 外出任务 */}
            <div > 
                {
                    data.map((item, index) => {
                        return (
                            // 任务列表
                            <div className={styles.card} key={index}>
                                {/* 顶部标题 */}
                                <div className={styles.title} onClick={()=>{navigate('/xiangqing?id='+item.id)}}>
                                    <div className={styles.titleTextLeft}>
                                        <h4>{item.title}</h4>
                                    </div>
                                    <div className={styles.titleTextRight}>
                                        待登记 <RightOutline />
                                    </div>
                                </div>
                                {/* 中间内容 */}
                                <div className={styles.content} style={{backgroundColor: 'white'}}>
                                    <div> 
                                        <div className={styles.shang}> 
                                            <div className={styles.shang1}>
                                                <div>发布日期</div>
                                                <div style={{fontSize: "1.7rem", color: "black"}}>{item.fabudate}</div>
                                            </div>
                                            <div className={styles.shang2}>
                                                <div className={styles.shang21}>
                                                    <div>测量日期</div>
                                                    <div style={{fontSize: "1.7rem", color: "black"}}>{item.celiangdate}</div>
                                                </div>
                                                <div className={styles.shang22}>
                                                    {item.celiangtime}
                                                </div>
                                            </div>
                                        </div>
                                        <div style={{marginTop: "1rem"}}>
                                            <p style={{display: "flex", justifyContent: "space-between", lineHeight: "3rem"}}>
                                                <span>客户</span>
                                                <span style={{width: "15rem", display: "flex", justifyContent: "space-between", alignItems: "center"}}>
                                                    <span>{item.kehu} </span>
                                                    {item.kehuphone} 
                                                    <img src='/img/phone.png' style={{width: "2rem"}} alt="" />
                                                </span>
                                            </p>
                                            <p style={{display: "flex", justifyContent: "space-between", lineHeight: "3rem"}}>
                                                <span>导购</span>
                                                <span style={{width: "15rem", display: "flex", justifyContent: "space-between", alignItems: "center"}}>
                                                    <span>{item.daogou} </span>
                                                    {item.daogouphone} 
                                                    <img src='/img/phone.png' style={{width: "2rem"}} alt="" />
                                                </span>
                                            </p>
                                            <p style={{display: "flex", justifyContent: "space-between", lineHeight: "3rem"}}>
                                                <span>测量地址</span>
                                                <span>{item.address}</span>
                                            </p>
                                            <p style={{display: "flex", justifyContent: "space-between", lineHeight: "3rem"}}>
                                                <span>确认预约日期</span>
                                                <span>{item.yuyuedate}</span>
                                            </p>
                                            <p style={{display: "flex", justifyContent: "space-between", lineHeight: "3rem"}}>
                                                <span>外出登记时间</span>
                                                <span>{item.waichudate}</span>
                                            </p>
                                            <p style={{display: "flex", justifyContent: "space-between", lineHeight: "3rem"}}>
                                                <span>工价</span>
                                                <b style={{color: 'red'}}>￥{item.price}</b>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                {/* 底部按钮 */}
                                <div className={styles.footer}>
                                    <Button style={{border: "0.1rem solid black"}} color='default' onClick={() => {
                                        // Toast.show('点击了预约记录')
                                        navigate('/jilu')
                                    }}>
                                        预约记录
                                    </Button>
                                    <Button style={{backgroundColor: "white"}} color='primary' fill='outline' onClick={() => {
                                        // Toast.show('点击了外出登记')
                                        navigate('/dengji')
                                    }}>
                                        外出登记
                                    </Button>
                                
                                </div>
                            </div>
                        )

                    })
                }
            </div>

        </div>
    )
}

export default WaiChu;